//解构出来一个函数  resolve 将路径片段拼接为『绝对路径』
const { resolve } = require('path');
//导入 eslint 插件
const ESLintPlugin = require('eslint-webpack-plugin');
//导入打包 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
//导入提取 css 的插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//导入压缩 css 的插件
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
//导入压缩 JS 的插件 Terser 简洁
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  //入口
  entry: './src/js/app.js',
  //出口
  output: {
    //输出的文件夹   __dirname 保存是文件所在文件夹的『绝对路径』
    // path: __dirname + '/build',  //绝对路径
    path: resolve(__dirname, '../build'), // 输出指的所有资源的输出目录
    //输出的文件名
    filename: 'js/bundle.js',
    //清理打包后的文件夹
    clean: true,
    //设置出口  设置页面中相关的资源 『 css js  图片  JSON  字体』
    publicPath: '/'
  },
  //模式
  mode: 'production',
  //loader 配置
  module: {
    rules: [
      // 规则
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader, // 将 commonJS 模块生成 style 标签, 插入到网页中
          'css-loader',  // 将 CSS 资源转为 commonJS 模块
          'postcss-loader',
        ]
      },
      {
        test: /\.less$/i,
        use: [
          // compiles Less to CSS
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'less-loader',  // 作用: 将 less 资源编译为 css 资源
        ],
      },
      //babel
      //配置 babel 的 loader
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              [
                '@babel/preset-env',
                {
                  useBuiltIns: 'usage',  // 按需引入(需要使用polyfill)
                  corejs: { version: 3 }
                }
              ]
            ]
          }
        }
      },
      //图片处理
      {
        test: /\.(jpg|png|gif)$/,
        type: "asset", // 资产
        //解析器
        parser: {
          //转base64的条件
          dataUrlCondition: {
            maxSize: 8 * 1024, // 8kb
          }
        },
        //生成文件
        generator: {
          //打包保存的文件名称
          filename: 'images/[hash:6][ext]',
        },
      },
      //html 的处理
      {
        test: /\.(html)$/,
        use: {
          loader: 'html-loader'
        }
      },
      //配置字体文件的处理
      {
        test: /\.(eot|svg|woff|woff2|ttf)$/,
        type: 'asset/resource', //asset 灵活   asset/resource 单独保存文件
        generator: {
          filename: 'fonts/[hash:6][ext]',
        },
      }
    ]
  },
  //插件
  plugins: [
    new ESLintPlugin(),
    new HtmlWebpackPlugin({
      template: "./src/index.html",// 指定html模板文件。
      inject: "body",// 将打包生成的JS文件放置在body尾部
      hash: true,// 在引入JS时增加hash后缀字符串,去除缓存。
      minify: {
        removeAttributeQuotes: false,// 移除属性中的双引号
        removeComments: true,// 移除注释
        collapseWhitespace: true,// 去除空格与换行
      }
    }),
    new MiniCssExtractPlugin({
      filename: "css/[hash:8].css",
    }),
  ],

  //代码压缩
  optimization: {
      minimizer: [
        new CssMinimizerPlugin(),
        new TerserPlugin()
      ],
  },

  //帮助快速定位错误的位置  source-map               定位到行与列
  // devtool: 'source-map'            //生产环境   source-map 或者『不设置 devtool』
}